<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>事件修饰符</title>
  <script type="text/javascript" src="../vue.js"></script>

  <style>
    *{
      margin-top: 20px;
    }
    .demo1{
      height: 50px;
      background-color: blue;
    }
    .box1{
      padding: 5px;
      height: 50px;
      background-color: blue;
    }
    .box2{
      padding: 5px;
      height: 50px;
      background-color: yellow;
    }
  </style>

</head>

<!--
        VUe中的事件修饰符：
          1.prevent:阻止默认事件（常用）；
          2.stop：阻止事件冒泡（常用）；
          3.once：事件只触发一次（常用）；
          4.capture：使用事件的捕获模式；
          5.self：只有event.target是当前操作的元素 时 才触发时间；
          6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
-->
<body>
<!-- 准备好 一个容器-->
<div id="root">
  <h2>欢迎来到{{name}}学习</h2>


<!--            1.prevent:阻止默认事件（常用）；-->
  <a href="https://www.baidu.com/" @click.prevent="showInfo">点我提示信息</a>


<!--            2.stop：阻止事件冒泡（常用）；-->
  <div class="demo1" @click="showInfo">
    <button @click.stop="showInfo">点我提示信息</button>
<!--     修饰符支持链式编程-->
<!--    <a href="https://www.baidu.com/" @click.stop.prevent="showInfo">点我提示信息</>-->
  </div>


<!--          3.once：事件只触发一次（常用）；-->
  <button @click.once="showInfo">点我提示信息</button>
<!--            4.capture：使用事件的捕获模式；-->
  <div class="box1" @click.capture="showMsg(1)">
    div1
    <div class="box2" @click="showMsg(2)">
      div2
    </div>
  </div>

<!--          5.self：只有event.target是当前操作的元素 时 才触发时间；-->
  <div class="demo1" @click.self="showInfo">
    <button @click="showInfo">点我提示信息</button>
  </div>

<!--            6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；-->

</div>


<script type="text/javascript">

  Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。

  //创建Vue实例
  new Vue({
    el:'#root',
    data:{
      name:'合肥学院'
    },
    methods:{
      showInfo(e){
        alert('你好傻逼')
        // console.log(e.target)
      },
      showMsg(msg){
        // alert(value)
        console.log(msg)
      }
    }
  })




</script>




</body>
</html>
